<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <style>
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="box">
        <table>
            <tr v-for="(good, index) in goods">
                <td>{{index}}</td>
                <td>{{good.name}}</td>
                <td>单价:￥{{good.price}}</td>
                <td><button @click="sub(good)">减1</button>
                    {{good.num}}
                    <button @click="add(good)">加1</button>
                </td>
            </tr>
        </table>
        <br>
        总价:￥{{sum}}
        <hr>
        <ul>
            <li v-for="(value, key, index) in address" :key="key">
                {{index}}-----{{key}}-----{{value}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: "#box",
        data() {
            return {
                sum: 0,
                goods: [
                    {
                        name: '西游记',
                        price: 35,
                        num: 0
                    },
                    {
                        name: '水浒传',
                        price: 49,
                        num: 0
                    },
                    {
                        name: '三国演义',
                        price: 42,
                        num: 0
                    },
                    {
                        name: '红楼梦',
                        price: 21,
                        num: 0
                    }
                ],
                address:{
                    provice:"四川",
                    city:"成都",
                    county:"高新",
                }
            }
        },
        methods: {
            sub(good) {
                //console.log(good);
                if (good.num <= 0) {
                    alert("数量不能小于0哦~~~")
                    return;
                }
                good.num -= 1;
                this.sum -= good.price;
            },
            add(good) {
                good.num += 1;
                this.sum += good.price;
            }
        },
    });
</script>

</html>